//动态生成下拉框数据渲染到下拉框
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        // console.log(res);
        if (res.status == 0) {
            let html = '';
            res.data.forEach(item => {
                html += `  <option value="${item.id}">${item.name}</option>`
            });
            $('select[name="cate_id"]').append(html)
            let form = layui.form
            form.render()   //不给参数就是更新全部    更新渲染
        }
    }
})

//富文本编辑器
initEditor()

//裁剪框
let image = $('#image')
let option = {
    //宽高比
    aspectRatio: 400 / 280,
    //预览区
    preview: '.img-preview'
}
image.cropper(option)

//调用file的点击事件
$('button:contains("封面")').on('click', function () {
    $('#file').trigger('click')
})

//当文本域的内容给改变时，修改裁剪图片
$('#file').on('change', function () {
    // console.dir(this);
    // console.log(this.files);
    if (this.files.length > 0) {
        let urlObj = this.files[0]
        let url = URL.createObjectURL(urlObj)
        // 更换图片（销毁目前的剪裁图片 --> 更换图片 --> 重建剪裁框）
        image.cropper('destroy').attr('src', url).cropper(option)
    }
})

//表单提交事件
$('form').on('submit', function (e) {
    e.preventDefault()
    // console.log(this);
    // 因为有文件上传，所以必须使用 FormData 对象
    let fd = new FormData(this)   // 传入表单的DOM对象，FormData可以根据各项的name属性收集值
    // console.log(fd);
    // 处理内容，通过富文本编辑器的语法，获取编辑器的内容。并把内容添加到fd对象中
    fd.set('content', tinyMCE.activeEditor.getContent())
    // 处理封面图片（剪裁图片，把图片转换成文件对象，最后追加到fd对象）
    let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 })
    canvas.toBlob(function (blob) {
        // 形参 blob 是blob对象，追加到fd中，就会变为文件对象
        fd.append('cover_img', blob)
        //  测试，看一下fd对象中有哪些值
        // fd.forEach((value, key) => {
        //     console.log(key, value);
        // })
        $.ajax({
            type: 'post',
            url: '/my/article/add',
            data: fd,
            processData: false,
            contentType: false,
            success: function (res) {
                console.log(res);
                layer.msg(res.message);
                location.href = './list.html'
            }
        })
    })
})
